/**
 * 日期时间插件
 * varstion 1.0.5
 * rongzhi
 */
// require('./picker/date.less');
//暂时不用rem 麻烦 －－！

(function($, document) {

	//创建 DOM
	$.dom = function(str) {
		if (typeof(str) !== 'string') {
			if ((str instanceof Array) || (str[0] && str.length)) {
				return [].slice.call(str);
			} else {
				return [str];
			}
		}
		if (!$.__create_dom_div__) {
			$.__create_dom_div__ = document.createElement('div');
		}
		$.__create_dom_div__.innerHTML = str;
		return [].slice.call($.__create_dom_div__.childNodes);
	};

	var domBuffer = '<div class="mui-dtpicker">\
		<div class="mui-dtpicker-header">\
			<span data-id="btn-cancel" >取消</span>\
			<span data-id="btn-ok" >确定</span>\
		</div>\
		<div class="mui-dtpicker-body">\
		</div>\
	</div>';

	//plugin
	var DtPicker = $.DtPicker = $.Class.extend({

		init: function(options) {

			var self = this;
			var _picker = $.dom(domBuffer)[0];

      var uls = options.map(function (each, index) {
        return `
        <div data-id="picker-`+index+`" class="mui-picker" style=width:`+ each.width +`>
          <div class="mui-picker-inner">
            <div class="mui-pciker-rule mui-pciker-rule-ft"></div>
            <ul class="mui-pciker-list">
            </ul>
            <div class="mui-pciker-rule mui-pciker-rule-bg"></div>
          </div>\
        </div>\
        `
      })

      _picker.querySelector(".mui-dtpicker-body").innerHTML = uls.join("");
      var mask = $.dom(`<div class="selector-mask-pic"></div>`)[0];
      var body = _picker.querySelector(".mui-dtpicker-body");

      document.body.appendChild(_picker);

      var pikerList = options.map(function (each, i) {
        var element = _picker.querySelector("[data-id=picker-"+ i+"]");
        return new R.Picker(element, {});
      })



			var ui = self.ui = {
				picker: _picker,
				mask: mask,
        body: body,
				ok: $('[data-id="btn-ok"]', _picker)[0],
				cancel: $('[data-id="btn-cancel"]', _picker)[0],
			  pikerList: pikerList
			};

			ui.cancel.addEventListener('click', function() {
				self.hide();
			}, false);
			ui.ok.addEventListener('click', function() {
				var rs = self._onsure.apply(self, self.ui.pikerList.map(function(each){return each.getSelectedItem()}));
				if (rs !== false) {
					self.hide();
				}
			}, false);

			ui.mask.addEventListener('click', function() {
				self.hide();
			}, false);

			//防止滚动穿透
			self.ui.body.addEventListener('touchstart',function(event){
				event.preventDefault();
			},false);
			self.ui.body.addEventListener('touchmove',function(event){
				event.preventDefault();
			},false);
		},
		getSelected: function(picker) {
			var self = this;
      return picker.getSelectedItem();
		},
    onchange: function () {
      return this;
    },
    onsure(fn) {
      this._onsure = fn;
      return this;
    },
  	setOpt(picker, tpl, attr) {
      //适配原业务代码 - - !
      var div = document.createElement("div");
      div.innerHTML = tpl;
      var liarr = [].slice.call(div.querySelectorAll("li"));
      var array = liarr.map(function (each) {
        return {
          text: each.innerText,
          value: each.getAttribute("data-value")
        }
      })
  		picker.setItems(array);

  		return this;
  	},
    setByVal: function (picker, val) {
      picker.setSelectedValue(val);
      return this;
    },

  	beforeShow(fn) {
  		this._beforeShow = fn;
  		return this;
  	},
		//显示
		show: function() {
			var self = this;
			var ui = self.ui;

      if (self._beforeShow) {
        self._beforeShow(...ui.pikerList);
      }
			document.body.classList.add("mui-dtpicker-active-for-page");
      document.body.appendChild(ui.mask);
      // document.body.appendChild(ui.picker);
      ui.mask.offsetHeight;
      ui.mask.classList.add("active");
      ui.picker.classList.add('mui-active');

		},
		hide: function() {
			var self = this;
			var ui = self.ui;
      document.body.classList.remove("mui-dtpicker-active-for-page");

			ui.picker.classList.remove("mui-active");
			ui.mask.classList.remove("active");
      ui.picker.addEventListener("webkitTransitionEnd", function () {
        if (!this.classList.contains("mui-active")) {
          // this.parentNode && this.parentNode.removeChild(this);
        }

      })
      ui.mask.addEventListener("webkitTransitionEnd", function () {
        if (!this.classList.contains("active")) {
          this.parentNode && this.parentNode.removeChild(this);
        }
      })

		},
		dispose: function() {
			var self = this;
			self.hide();
			setTimeout(function() {
				self.ui.picker.parentNode.removeChild(self.ui.picker);
				for (var name in self) {
					self[name] = null;
					delete self[name];
				};
				self.disposed = true;
			}, 300);
		}
	});

})(R, document);
